<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
  *{margin:0;padding:0;}
  .jd{
    width:35px;
	height:180px;
	position:fixed;
	right:0;
	top:200px;
  }
  #bottom{
    width:35px;
	height:70px;
	position:fixed;
	right:0;
	bottom:0;
  }
   ul li{
    width:35px;
	height:35px;
	border-bottom:1px solid #fff;
	list-style:none;
	background:#7a6e6e;
	border-radius:5px;
	position:relative;
	cursor:pointer;
  }
  ul li i{
    width:35px;height:35px;
	background:#7a6e6e;
	display:block;
	border-radius:3px 0 0 3px;
  }
  ul li:hover i{
    background-color:#c81623;
  }
  ul li .list1{
    background:url(images/1.png) no-repeat -88px -175px;
  }
  ul li .list2{
    background:url(images/1.png) no-repeat -50px 0px;
  }
   ul li .list3{
    background:url(images/1.png) no-repeat -50px -50px;
  }
   ul li .list4{
    background:url(images/1.png) no-repeat -50px -100px;
  }
   ul li .list5{
    background:url(images/1.png) no-repeat -50px -150px;
  }
  ul li p{
    width:62px;height:35px;
	color:#fff;
	line-height:35px;
	background:#7a6e6e;
	position:absolute;
	left:0;top:0;
	text-align:center;
	font-size:12px;
	border-radius:3px 0 0 3px;
	z-index:-1;
  }
   ul li:hover p{
     background-color:#c81623; 
   }
   ul li .li1{
    background:url(images/1.png) no-repeat -50px -250px;
  }
  ul li .li2{
    background:url(images/1.png) no-repeat -50px -300px;
  }
</style>

</head>
<body>
  <div class="jd">
    <ul>
	  <li>
	    <i class="list1"></i>
		<p>京东会员</p>
	  </li>
	  <li>
	    <i class="list2"></i>
		<p>购物车</p>
	  </li>
	  <li>
	    <i class="list3"></i>
		<p>我的关注</p>
	  </li>
	  <li>
	    <i class="list4"></i>
		<p>我的足迹</p>
	  </li>
	  <li>
	    <i class="list5"></i>
		<p>咨询</p>
	  </li>
	  
	</ul>
  </div>
  <div id="bottom">
    <ul>
      <li>
	    <i class="li1"></i>
		<p>顶部</p>
	  </li>
	  <li>
	    <i class="li2"></i>
		<p>反馈</p>
	  </li>
	</ul>
  </div>
  <script src="jquery.js"></script>
  <script type="text/javascript">
    $(function(){
	  $("ul li").hover(function(){
	    $(this).find("p").stop().animate({left:"-60px"},500)
	  },function(){
	    $(this).find("p").stop().animate({left:0},500)
	  })
	})
  </script>
</body>
</html>